<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/11
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layout 健身房管理系统</title>
    <%--    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>--%>
    <%--    <meta name="renderer" content="webkit">--%>
    <%--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--%>
    <%--    <meta name="viewport" content="width=device-width, initial-scale=1">--%>
    <%--    <link href="${pageContext.request.contextPath}/layui-v2.8.4/layui/css/layui.css" rel="stylesheet">--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font_4115938_q5o09xjaz59/iconfont.css">
</head>
<script>
    function Out(){
        window.location.href="${pageContext.request.contextPath}/user/logout";
    }
    function toMemberInfo(url){
        $("#main").load(url);
    }
    function toEquipmentInfo(url){
        $("#main").load(url);
    }
    function toEmployeeInfo(url){
        $("#main").load(url);
    }
</script>
<body>
<%--会员管理--%>

<!-- 内容主体区域 -->
<div style="padding: 15px;">
    <blockquote class="layui-elem-quote layui-text" style="font-size: 45px">
        员工管理
    </blockquote>
    <div style="display: flex">
        <i class="iconfont icon-kechengbiao" style=""></i>
        <span style="font-size: 20px;margin-top: 12px;">员工信息表</span>
    </div>
</div>

<%--<form  method="post" id="myForm">--%>
<div style="display: flex;float: left">
    <div class="layui-form">
        <input type="text" name="className" placeholder="请输入工号" class="layui-input" style="margin-right: 20px;width: 100px;margin-left: 20px"  id="demoReload1">
        <hr class="ws-space-16">
    </div>
    <div class="layui-form">
        <input type="text" name="className" placeholder="请输入姓名" class="layui-input" style="margin-right: 20px;width: 100px;margin-left: 20px"  id="demoReload2">
        <hr class="ws-space-16">
    </div>
    <%--            <input type="submit" class="layui-btn"  lay-submit lay-filter="demo1" style="margin-left: 20px" value="搜索" id="submitBtn">--%>
    <button class="layui-btn" lay-submit lay-filter="demo1" style="margin-left: 20px; "id="searchBtn">搜索</button>
</div>
<%--</form>--%>
<button type="button" class="layui-btn layui-btn-normal" style="margin-left: 20px;float: left" id="addMember">新增员工</button>
<button class="layui-btn layui-btn-danger" id="btn-delete-selected"  style="margin-left: 20px;float: left" id="dekMember">删除选中行</button>
<%--style="width: 1341px"--%>
<%--表格--%>
<div >
    <table class="layui-hide"  lay-filter="test" id="ID-table-demo-editable"></table>
</div>
<%--单个删除按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-danger" lay-event="edit">删除</a>
</script>
<%--批量删除按钮--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <%--        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">批量删除</button>--%>
    </div>
</script>
<!-- 编辑弹出层内容 -->
<div id="edit-layer" style="display: none;">
    <form class="layui-form" lay-filter="layui-edit-form" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">员工工号</label>
            <div class="layui-input-block">
                <input type="text" name="employeeAccount" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly" value="系统自动生成">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-block">
                <input type="text" name="employeeName" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工性别</label>
            <div class="layui-input-block">
                <input type="text" name="employeeGender" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工年龄</label>
            <div class="layui-input-block">
                <input type="text" name="employeeAge" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工职位</label>
            <div class="layui-input-block">
                <input type="text" name="employeeStaff" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit-form">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </div>
    </form>
</div>


<script>
    <%--&lt;%&ndash;layui.use(function(){&ndash;%&gt;页面一开始就加载--%>
    layui.use(function(){
        var table = layui.table;
        var util = layui.util;

        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-editable',
            toolbar: '#toolbarDemo',
            url: '${pageContext.request.contextPath}/employee/ToEmployeeInfo' // 此处为静态模拟数据，实际使用时需换成真实接口
            ,page: true
            ,limits: [3, 5, 10]
            ,limit: 5 // 每页默认显示的数量
            // ,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
            ,css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view td[data-edit]{color: #16B777;}'
            ].join('')
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                ,{field:'id', fixed: 'left', width:100, title: 'ID', sort: true,edit: 'text'}
                ,{field:'employeeAccount', width:150, title: '员工工号',edit: 'text'}
                ,{field:'employeeName', width:125, title: '姓名',edit: 'text'}
                ,{field:'employeeGender', width:100, title: '性别',edit: 'text'}
                ,{field:'employeeAge', width: 100, title: '年龄', sort: true,edit: 'text'}
                ,{field:'employeeStaff', title:'员工职位', width:500,edit: 'text'}
                ,{fixed: 'right', title:'操作', width:200, minWidth: 125, toolbar: '#barDemo'}
            ]]
        });

        // 单元格编辑后的事件
        //触发表格的编辑事件

        table.on('edit(test)', function(obj){
            var field = obj.field; // 得到修改的字段
            var value = obj.value // 得到修改后的值
            var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
            var data = obj.data // 得到所在行所有键值
            var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

            // 值的校验
            if(value.replace(/\s/g, '') === ''){
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
            // 编辑后续操作，如提交更新请求，以完成真实的数据更新
            // …
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/employee/EditEmployee', // 后端编辑接口
                data: {
                    id: data.id, // 数据行编号
                    field: field, // 列名称
                    value: value // 修改后的值
                },
                success: function(result) {
                    if (result.code === 200) { // 编辑成功
                        layer.msg('编辑成功');
                    } else { // 编辑失败
                        layer.msg('编辑失败: ' + result.msg);
                    }
                },
                error: function() {
                    layer.msg('网络错误，编辑失败');
                }
            });

            // 显示 - 仅用于演示
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
        });


    });
    //模糊查询
    layui.use('table', function() {
        var table = layui.table;
        //监听表格搜索按钮的点击事件
        //keyup键盘输入事件,demoReload是input的id
        // $('#searchBtn').on('click', function() {，searchBtn是button的id
        // $('#demoReload').on('keyup', function() {
        $('#searchBtn').on('click', function() {
            //获取输入框当前的文本值
            // var keyWord = $(this).val();
            var keyWord1 = $('#demoReload1').val();
            var keyWord2 = $('#demoReload2').val();
            //执行重载
            table.reload('ID-table-demo-editable', {
                page: {
                    curr: 1 //重新从第一页开始
                },
                where: {
                    employeeAccount: keyWord1, //分类名称
                    employeeName: keyWord2
                },
                method: 'post'   //需要这行才能将where内的参数以post请求形式进行传输
            });
        });
    });

    layui.use(['layer'], function() {
        var layer = layui.layer;
        //定义表单，为了获取表单数据
        let form = layui.form;
        // 监听按钮点击事件
        $('#addMember').on('click', function() {
            // 弹出层
            layer.open({
                type: 1,
                title: '添加员工',
                area: ['500px', '350px'],
                content: $('#edit-layer').html(),

                success: function(layero, index){

                    // form.val("layui-edit-form", {
                    //     "userName": data.userName,
                    //     "userPwd": data.userPwd,
                    //     "userTel":data.userTel,
                    //     "address":data.address,
                    // })
                    // let id = data.id
                    // 监听表单提交事件
                    //edit-form表单过滤器id，或者是提交按钮的过滤器id
                    form.on('submit(edit-form)', function(data){
                        // TODO：提交表单后的处理逻辑
                        // data.field.id = id
                        $.ajax({
                            url: '${pageContext.request.contextPath}/employee/addEmployee',
                            type: "post",
                            data: data.field,
                            success: function (result) {

                                toMemberInfo('${pageContext.request.contextPath}/employee/ToEmployee');

                                layer.msg('添加成功',{icon: 1});

                            },
                            error: function () {
                                layer.msg('添加失败',{icon: 2});
                            }

                        });
                        layer.close(index); // 关闭弹出层

                        return false; // 阻止表单跳转
                    });
                }
            });
        })
    });

    layui.use('table', function(){
        var table = layui.table;
        // 监听删除选中行按钮的点击事件
        $('#btn-delete-selected').on('click', function(){
            // 获取当前选中的行数据
            var checkData = table.checkStatus('ID-table-demo-editable').data;
            // var data = checkStatus.data;
            if (checkData.length === 0) {
                // 未选中任何行，给出提示
                return layer.msg('请先选择要删除的行');
            }
            layer.confirm('确定删除选中的'+checkData.length+'条数据吗？', function(index){
                // 获取选中数据的id列表
                //$.map 方法接受两个参数，第一个参数是待处理的数组，第二个参数是一个处理函数。对于数组 checkData 中的每个元素，处理函数会调用一次，
                // 并且将该元素作为参数传递（该参数将在函数中通过 item 变量访问）。该函数的返回值将添加到 ids 数组中。
                // 在这段代码中，处理函数返回了当前元素的 id 字段的值，因此 ids 数组中的元素即为 checkData 数组中每个元素的 id 字段的值。
                const ids = $.map(checkData, function (item) {
                    return item.id;  // 假设每行数据的id为字段id
                });
                console.log(ids);
                $.ajax({
                    url: '${pageContext.request.contextPath}/employee/delEmployee',
                    type: 'post',
                    data: { ids: ids },
                    success: function(result) {
                        if (result.code ==200 ) {
                            layer.msg('删除成功');
                            // 删除成功后重新加载表格数据
                            table.reload('ID-table-demo-editable');
                            toMemberInfo('${pageContext.request.contextPath}/employee/ToEmployee');
                        } else {
                            layer.msg('删除失败');
                        }
                    },
                    error: function() {
                        layer.msg('服务器异常，请稍后再试！');
                    }
                });
            });
        });
    });
    <%--function getData() {--%>
    <%--    let jsonData;--%>
    <%--    jsonData = ${requestScope.userList}--%>
    <%--    return jsonData;--%>
    <%--}--%>
</script>

</body>
</html>
